<template>
    <div class="user">
      <el-row>
        <el-col :span="24">
          <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        </el-col>
      </el-row>

      <el-table
        class="margin-20"
        v-loading="loading"
        :data="authList"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="authName"
          label="权限名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="path"
          label="路径"
          width="540">
        </el-table-column>
        <el-table-column label="层级">
            <template slot-scope="scope">
                {{scope.row.level |fmtLevel}}
            </template>          
        </el-table-column>       
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[1,10, 20, 30, 40]"
          :page-size="1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>    
    </div>
</template>


<script>
import {getAuthList} from '@/api/index.js'
export default {
    data: function(){
        return {
        loading: false,
        authList: [
          {"id":1,"authName":"超级管理员1","path":"admin","level":1486720211},
          {"id":2,"authName":"超级管理员2","path":"admin","level":1486720211},
          ],
        query: '',
        total: 0,
        pagesize: 1,
        pagenum: 1,
     
      }
    },
    created:function(){
      //网页加载时调用initList方法获取数据
      this.initList()
    },
    methods: {    
        //获取最新列表数据
        initList:function(){
            //显示loading效果
            // this.loading = true
            getAuthList({type:"list"}).then(res=>{
                if(res.meta.status === 200 ){
                    this.authList = res.data    
                    this.loading = false
                }      
            })           
        },      
        handleSizeChange (val) {
          this.pagesize = val;
          this.initList()
          console.log(`每页 ${val} 条`)
        },
        handleCurrentChange (val) {
          //更改当前页
          this.pagenum = val;
          //获取新页码数据
          this.initList()
          // console.log(`当前页: ${val}`)
        }
    },
    filters:{
        fmtLevel(level){
            if(level == 0){
                return '一级'
            }else if(level ==1){
                return '二级'
            }else{
                return '三级'
            }
        }
    }

}
</script>

<style scoped>
  .user .margin-20 { 
    margin: 20px 0;
  }
  .user .search-input {
    width: 300px;
  }
  .user .page {
    padding: 5px 0;
    background-color: #D3DCE6;
  }
</style>